<template>
	<view class="login">
		<view style="height: 20rpx;"></view>
		<view class="login-cont">
			<u-form :model="form" ref="uForm" :rules="rules" labelPosition="left" labelWidth='80'>
				<u-form-item label="厂区" borderBottom prop="form.cqName" @click="Cqshow = true;">
					<u-input v-model="form.cqName" placeholder="请选择厂区" border='none' disabled
						disabledColor='transparent' />
					<u-icon slot="right" name="arrow-right" size="18"></u-icon>
				</u-form-item>
				<view class="mine-cell-child"></view>
				<u-form-item label="部门" borderBottom prop="form.bmName" @click="Bmshow = true;">
					<u-input v-model="form.bmName" placeholder="请选择部门" border='none' disabled
						disabledColor='transparent' />
					<u-icon slot="right" name="arrow-right" size="18"></u-icon>
				</u-form-item>
				<view class="mine-cell-child"></view>
				<u-form-item label="姓名" borderBottom prop="form.userName">
					<u-input v-model="form.userName" placeholder="请输入姓名" border='none' />
				</u-form-item>
				<view class="mine-cell-child"></view>
				<u-form-item label="证件号码" borderBottom prop="form.userCard">
					<u-input v-model="form.userCard" placeholder="请输入证件号码" border='none' />
				</u-form-item>
				<view class="mine-cell-child"></view>
				<u-form-item label="手机号" borderBottom prop="form.userTel">
					<u-input v-model="form.userTel" placeholder="请输入手机号" border='none' type="number" />
				</u-form-item>
				<view class="login-btn" @click="submit">保存信息</view>
				<!-- 厂区显示 -->
				<u-picker v-if="Cqshow" :show="Cqshow" :columns="Cqcolumns" @confirm="CqConfirm"
					@cancel='Cqshow = !Cqshow' keyName="dataInfo"></u-picker>
				<!-- 部门显示 -->
				<u-picker v-if="Bmshow" :show="Bmshow" :columns="Bmcolumns" @confirm="BmConfirm"
					@cancel='Bmshow = !Bmshow' keyName="dataInfo"></u-picker>
			</u-form>
		</view>
	</view>
</template>

<script>
	import {
		listBm,
		listCq,
		updateUserSwl
	} from '@/api/login.js'
	export default {
		data() {
			return {
				form: {
					userId: '',
					bmName: '', //部门名称
					bmId: '', //部门ID
					cqName: '', //厂区名称
					cqId: '', //厂区ID
					userName: '', //姓名
					userCard: '', //证件号码
					userTel: '', //联系方式
				},
				rules: {},
				// 厂区显示 & 列表
				Cqshow: false,
				Cqcolumns: [
					[]
				],
				// 部门显示 & 列表
				Bmshow: false,
				Bmcolumns: [
					[]
				]
			}
		},
		mounted() {
			this.form.userId = this.$store.state.vuex_info.userId ?? ''
			this.form.bmName = this.$store.state.vuex_info.bmName ?? ''
			this.form.bmId = this.$store.state.vuex_info.bmId ?? ''
			this.form.cqName = this.$store.state.vuex_info.cqName ?? ''
			this.form.cqId = this.$store.state.vuex_info.cqId ?? ''
			this.form.userName = this.$store.state.vuex_info.userName ?? ''
			this.form.userCard = this.$store.state.vuex_info.userCard ?? ''
			this.form.userTel = this.$store.state.vuex_info.userTel ?? ''
			// 获取厂区列表
			this.listCqHttp()
			// 获取部门列表
			this.listBmHttp()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			// 获取厂区列表
			listCqHttp() {
				let _this = this;
				listCq().then(res => {
					if (res.success) {
						_this.Cqcolumns[0] = res.data ?? []
					} else {
						_this.Cqcolumns[0] = []
					}
				})
			},
			// 厂区选择
			CqConfirm(e) {
				if(e.value[0]){
					this.form.cqName = e.value[0].dataInfo
					this.form.cqId = e.value[0].id
					this.Bmcolumns = [[]]
					this.form.bmName = null
					this.form.bmId = null
					// 获取部门列表
					this.listBmHttp()
				}
				this.Cqshow = false
			},
			// 获取部门列表
			listBmHttp() {
				let _this = this;
				listBm({
					'parentId':_this.form.cqId
				}).then(res => {
					if (res.success) {
						_this.Bmcolumns[0] = res.data ?? []
					} else {
						_this.Bmcolumns[0] = []
					}
				})
			},
			// 部门选择
			BmConfirm(e) {
				if(e.value[0]){
					this.form.bmName = e.value[0].dataInfo
					this.form.bmId = e.value[0].id
				}
				this.Bmshow = false
			},
			// 保存
			submit() {
				let _this = this;
				// 校验
				if (!_this.form.userName ||
					!_this.form.userCard ||
					!_this.form.userTel) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}
				if (!_this.form.cqName) {
					uni.showToast({
						title: '请选择厂区',
						icon: 'none'
					});
					return;
				}
				if (!_this.form.bmName) {
					uni.showToast({
						title: '请选择部门',
						icon: 'none'
					});
					return;
				}
				let reg = /^1[3456789]\d{9}$/;
				if (!reg.test(_this.form.userTel)) {
					uni.showToast({
						title: '请输入有效的手机号码',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					title: '正在保存...'
				});
				updateUserSwl(_this.form).then(res => {
					uni.hideLoading();
					if (res.success) {
						uni.showToast({
							title: '保存成功！',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.login {
		height: 100vh;
		background-color: #F8F8F8;
		// background-image: linear-gradient(45deg, #1D91D7, #32B1BD);

		.login-cont {
			width: 80%;
			background-color: #fff;
			border-radius: 25rpx;
			margin: 0 auto;
			padding: 20rpx 40rpx 160rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.login-btn {
			width: 95%;
			border-radius: 50rpx;
			text-align: center;
			color: #fff;
			margin: 160rpx auto 0;
			font-size: 36rpx;
			border: 1px solid #eee;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 10rpx;
			// background: linear-gradient(to right, #32B1BD, #1D91D7);
			background-color: #5FC48D;
			font-size: 32rpx;
		}

		.mine-cell-child {
			height: 20rpx;
		}
	}
</style>